<template>
  <div class="find">
    <Navbar :back="true" :title="name" />
    <div class="find__container">
      <ul>
        <GoodItem v-for="(item, index) in goodsList" :item="item" :color="color" :itemIndex="index + 1"
          :dataType="type" />
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from "@/components/Navbar.vue";
import GoodItem from "@/components/GoodItem.vue";
import { GoodsItem } from "@/views/home/index.vue";
import { useRoute } from "vue-router";
import { getSearchGoods, getGoodsList } from "@/api"
import { ref } from "vue"
const route = useRoute();
const { type, color, name, discount } = route.query as {
  type: string;
  color: string;
  name: string;
  discount?: string;
};
const goodsList = ref<GoodsItem[]>([])
async function initData() {
  const { data: result } = name === "result" ? await getSearchGoods({ name: route.params.id as string }) :
    name === "全部" ? await getGoodsList({ limit: 10, type: JSON.stringify({ key: "type", value: route.params.id }) }) : await getGoodsList({ limit: 10, type: JSON.stringify({ key: "discount", value: discount }) })
  goodsList.value = result
}
initData()
</script>

<style lang="scss">
.find {
  font-size: 16rem;

  &__container {
    height: calc(100vh - 77rem);
    background: var(--linear-gradient);
    box-sizing: border-box;
    padding: 0 20rem 30rem;
    overflow: scroll;

    ul {
      margin-top: 8rem;
      @include flex(row, center, space-between);
      flex-wrap: wrap;
    }
  }
}
</style>
